<template>
  <Popup
      :round="round"
      v-model="visible"
      :transition-appear="true"
      :close-on-popstate="true"
      overlay-class="layer_wrap"
      @click-overlay="handleClose"
      :safe-area-inset-bottom="true"
      :close-on-click-overlay="false"
  >
    <div class="report-result">
      <div class="countdown-wrap">
        <div class="name">{{ info.patientName }}</div>
        <div class="countdown" @click="handleClose(false)">{{ `${time / 1000}` }}</div>
      </div>
      <div class="patient-wrap" :data-info="currentPatientInfo" :key="widgetKey" :style="getStyle('inside')">
        <div class="flex-box" v-for="item in currentPatientInfo" :class="{'flex-box-fail':item?.status !== 200}">
          <template v-if="item?.status === 200">
            <template v-if="true">
              <div class="patient-info patient-top">
                <ul class="sign-item-wrap">
                  <li>{{ (item?.orderNo) || '\u00a0' }}</li>
                  <li>报到成功</li>
                </ul>
                <ul class="item-wrap">
                  <li class="sign">
                    等待人数
                  </li>
                  <li class="content">
                    {{ (item?.countNum) || '\u00a0' }}
                  </li>
                </ul>
                <ul class="item-wrap">
                  <li class="sign">
                    号别
                  </li>
                  <li class="content">
                    {{ (item?.registerObjName) || '\u00a0' }}
                  </li>
                </ul>
                <ul class="item-wrap">
                  <li class="sign">
                    诊室
                  </li>
                  <li class="content">
                    {{ (item?.treatmentRoomName) || '\u00a0' }}
                  </li>
                </ul>
              </div>
            </template>
            <template v-if="true">
              <div class="patient-info patient-bottom">
                <ul class="item-wrap">
                  <li class="sign">
                    科室
                  </li>
                  <li class="content">
                    {{ (item?.deptName) || '\u00a0' }}
                  </li>
                </ul>
                <ul class="item-wrap">
                  <li class="sign">
                    姓名
                  </li>
                  <li class="content">
                    {{ (item?.patientName) || '\u00a0' }}
                  </li>
                </ul>
                <ul class="item-wrap">
                  <li class="sign">
                    卡号
                  </li>
                  <li class="content">
                    {{ (item?.patientCardNo) || '\u00a0' }}
                  </li>
                </ul>
                <div class="report-all" v-if="false" @click="handlePrint(item)">
                  打印小票
                </div>
              </div>
            </template>
          </template>
          <template v-else>
            <div class="icon-result" :class="getClassName(item)"/>
            <div class="fail-title">报到失败</div>
            <div class="fail-content">{{ item.msg }}</div>
          </template>
        </div>
      </div>
    </div>
  </Popup>
</template>

<script>
import { v4 as uuid } from "uuid";
import {Popup} from 'vant';
import {pxToVw} from "@/utils/common";
import Template from "@sc/template/index.vue";
import * as types from "@c/public/form-designer/devType/datas-types";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import {buildParentApi} from "@/utils/designer/util";

export default {
  name: 'ReportSucessPatient',

  componentName: "ReportSucessPatient",

  props: {
    visible: {
      type: Boolean,
      required: true
    },
    info: {
      type: Object,
      required: true
    },

    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi()
    },

  },

  components: {
    ScrollX,
    Template,
    Popup,
  },

  data() {
    return {
      round: true,
      time: 60,
      timer: null,
      widgetKey: uuid(),
      listHeight: 100,
      topCheckList: ["orderNo", "countNum", "registerNameKey", "roomKey"],
      bottomCheckList: ["deptName", "patientCardNoHide", "patientName", "projectName", "print"],
      patientFields: types['patientFields'],
      currentPatientInfo: Array(),
    }
  },

  computed: {
    // 行内样式
    getStyle() {
      return function (row) {
        let obj = Object();
        switch (row) {
          case 'inside':
            let winHeight;
            // 获取窗口宽度
            if (window.innerWidth) {
              winHeight = window.innerHeight;
            } else if ((document.body) && (document.body.clientHeight)) {
              winHeight = document.body.clientHeight;
            }
            console.log(winHeight)
            Reflect.set(obj, 'maxHeight', pxToVw(winHeight - 100))
            return obj;
        }
      }
    },

    // 获取首位患者
    headPatient() {
      return function (row) {
        const self = this;
        let first = self.$lodash.head(self.info?.patientNumberList) || Object();
        let signObj = first?.signInfo || Object();
        if (Reflect.has(first, 'signInfo')) {
          Reflect.deleteProperty(first, 'signInfo');
        };
        let mergeArr = [self.$lodash.merge(first, signObj)]
        return mergeArr
      }
    },


    // 定义className
    getClassName() {
      return function (val) {
        let state = parseInt(val.status);
        switch (state) {
          case 500:
            return 'icon-fail';
          case 200:
            return 'icon-success';
          default:
            return 'icon-fail';
        }
      }
    },

    // 显示字段对象
    fieldList() {
      return function (type) {
        let {patientShowFields = this.patientFields} = this.info;
        switch (type) {
          case 'top':
            return patientShowFields['topFields']
          case 'bottom':
            return patientShowFields['bottomFields']
        }
      }
    },
  },

  mounted() {
    console.log('init')
  },

  methods: {
    handleClose() {
      const self = this;
      self.time = 60000
      clearInterval(self.timer);
      self.currentPatientInfo = Array();
      self.$emit('handle-cancel')
      self.$emit('handleCancel')
    },

    //打印小票
    handlePrint(params){
      // this.$emit('handle-print',params)
      // this.$emit('handlePrint',params)
      this.parentApi.executeParentMethod('signPrint', params);
    }
  },

  watch: {
    visible: {
      handler: function (val) {
        const self = this;
        if (val) {
          self.widgetKey = uuid();
          let first = self.$lodash.head(self.info?.patientNumberList) || Object();
          let mergeArr = self.headPatient(first) || Array();
          self.currentPatientInfo = mergeArr;
          self.$nextTick(() => {
            self.time = (self.info?.time || 60) * 1000;
            self.timer = setInterval(() => {
              self.time = self.time - 1000;
              if ((self.time <= 0)) {
                self.handleClose();
              }
              console.log('1关闭倒计时')
            }, 1000);
          });
        } else {
          clearInterval(self.timer);
          self.currentPatientInfo = Array();
          console.log('2关闭倒计时');
        }
      },
      deep: true,
      immediate: true
    },
  },

}
</script>

<style lang="scss" scoped>
@import "./assets/style";
</style>
